<script setup lang="ts">
import { storePlayer } from '@/stores/music'

import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAudioState } from '@/localstorage/AudioState'

const store = storePlayer()
const player = store.player

onMounted(() => {
    // 如果没有存储播放状态，则初始化播放器
    if (!player.audioElm.src) {
        // 关闭时存储播放状态，启动时恢复播放状态
        const audioState = getAudioState()
        if (audioState) {
            // 恢复播放状态
            let { currentTime, metaData, progress, lyricIndex, lyricArr, volume, showLyric } = { ...audioState }
            player.audioElm.currentTime = currentTime
            player.audioElm.src = metaData.url

            player.volume = volume
            player.setVolume()

            player.progress = progress
            player.metaData = audioState.metaData

            player.lyricArr = lyricArr
            player.lyricIndex = lyricIndex
            player.showLyric = showLyric

            if (player.playing) {
                player.playMusic(player.metaData)
            }
        }
    } else {
        if (player.playing) {
            player.play()
        }
    }
})

</script>

<template>
    <!--控制栏-->
    <el-row class="ctl">
          <div class="iconfont icon-step-backward" @click="player.previous(player.metaData.name)"></div>

          <div class="iconfont icon-zanting playBtn" v-if="player.playing" @click="player.togglePlay()"></div>

          <div class="iconfont icon-bofangzanting playBtn" v-if="!player.playing" @click="player.togglePlay()"></div>

          <div class="iconfont icon-step-forward" @click="player.next(player.metaData.name)"></div>

          <div v-if="player.playMode === 'SEQUENTIAL'" class="iconfont icon-shunxubofang" @click="player.togglePlayMode()"></div>
          <div v-if="player.playMode === 'RANDOM'" class="iconfont icon-suijibofang" @click="player.togglePlayMode()"></div>
          <div v-if="player.playMode === 'LOOP'" class="iconfont icon-yinle-danqubofang" @click="player.togglePlayMode()"></div>
    </el-row>
</template>

<style lang="less" scoped>
.ctl {
    place-items: center;

    div {
      font-size: 60px;
        margin-left: 20px;
        color: #5d5c5c;
    }
    div:hover {
        color: #000000;
        cursor: pointer;
    }
}

.playBtn {
    font-size: 80px !important;
    color: #fc3d49 !important;
}
.playBtn:hover {
    color: #ce1724 !important;
}
</style>
